<template>
  <div class="catgroy">
   <div @click="gotoNewSearch(item)" class="box_item_s" v-for="(item,index) in list" :key="index">
   <image
   style="width: 200rpx;height: 100rpx;"
	:src="item.pic"
	mode="scaleToFill"
   />
   <div style="margin-top: 10rpx;font-size: 24rpx;text-align: center">{{ item.categoryName }}</div>
   </div>
  
  </div>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import {categoryInfo,pageProd} from '../https/api/catgriy'


onShow(async()=>{
  let res = await categoryInfo()
 
  list.value = res.data


})

let list = ref([])

let list2 = [{
			name: 'uv-ui简介',
			desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化，支持vue3等优化，最重要的是支持单独导入直接使用，无需在main.js中进行配置。\n\n2. uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。但是会在下载处进行广告配置，作为开发团队的研发费用的部分来源，所以希望大家理解。'
		}]

let gotoNewSearch = async(item) => {
  uni.setStorageSync('catInfo',JSON.stringify(item))
  uni.navigateTo({
	url:'/pages/catList'
})
}
</script>

<style lang="scss" scoped>
.box_item_s{
	border-radius: 20rpx;
	padding: 10rpx;
	box-shadow:  0upx 5upx 10upx rgba(0, 0, 0, 0.4);
}
.catgroy{
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 10rpx 20rpx;
		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}
		&-content {
			padding: 20rpx 0;
			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}
	.gap {
		padding: 0 30rpx;
	}
  ::v-deep .uv-vtabs__bar-item-active--value{
    color: #FF1C23!important;;
  }
  </style>